<template>
    <div class="memManagement">
        <Breadcrumb :firstMenu="'财务管理'" :secondMenu="'会员信息'"/>
        <el-row class="topsearch">
            <el-col :span="14">
                <el-row>
                    <el-col :span="8">
                    <span style="font-size:16px ">手机号：</span>
                    <el-input placeholder="请输入手机号" v-model="defaultProps.mobile" style="width: 150px;"> </el-input>
                    </el-col>
                    <el-col :span="8">
                    <span style="font-size:16px ">姓名：</span>
                    <el-input placeholder="请输入姓名" v-model="defaultProps.userName" style="width: 150px;"> </el-input>
                    </el-col>
                    <el-col :span="8">
                    <span style="font-size:16px ">关键字：</span>
                    <el-input placeholder="请输入关键字" v-model="defaultProps.keyContent" style="width: 150px;"> </el-input>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="10">
              <el-button class="conditionBtn" @click="getTableData" >查询</el-button>
              <el-button class="conditionBtn" @click="add">导出</el-button>
              <el-button class="conditionBtn" @click="add">导入</el-button>
            </el-col>
        </el-row>
        <el-row :span="24" class="operBtns">
            <el-button  icon="el-icon-plus" @click="add()">添加</el-button>
            <el-button  icon="el-icon-edit"  @click="edit()">编辑</el-button>
            <el-button  icon="el-icon-delete" @click="del()">删除</el-button>
        </el-row>
        <div class="table">
          <TableContent :parentTableData="result" :parentDefault="defaultProps" v-on:setCurrentMeal="selectMeal" v-on:setParentSelection="setSelection"/>
        </div>
        <AddMem v-on:cancelModule="cancelModule" v-if="dialogVisible" v-on:getParentTableData="getTableData" :parentTitle="title" :parentCurrentMeal="currentMeal"></AddMem>
    </div>
</template>

<script>
import Breadcrumb from "@/components/breadCrumb/breadCrumb.vue";
import axios from "axios";
import TableContent from '@/views/memManagement/components/tableContent/tableContent.vue';
import AddMem from '@/views/memManagement/components/addMem/addMem.vue';
export default {
    components:{
        Breadcrumb,
        TableContent,
        AddMem
    },
    data(){
        return{
            urlPrev: 'http://39.106.7.166:8089/',
            defaultProps:{
                id:0,
                pageSize: 10,
                pageIndex: 1,
                restaurantId: 1,
                mobile:'',
                userName:'',
                keyContent:''
            },
            result: {},
            multipleSelection: [],
            dialogVisible: false,
            currentMeal: {}, // 当前选中数据
            title: 1 // 1 新增  2编辑
        }
    },
    mounted(){
        this.getTableData();
    },
    methods:{
        setSelection(arr){
        this.multipleSelection = arr;
        console.log(arr)
      },
        //获取表格数据
        getTableData(){
            const url = this.urlPrev+`api/member/getmember`;
            axios({method: 'post',url: url,data: this.defaultProps})
            .then(rsp=>{
                if (rsp.data.status == 1) {
                    this.result = rsp.data;
                } else{
                    this.$message({
                        message: rsp.data.message,
                        type: 'error',
                    });
                }
            })
        },
        // 新增
      add() {
          this.title = 1;
          this.dialogVisible = true;
      },
      // 编辑
      edit() {
        if(Object.keys(this.currentMeal).length) {
          this.title = 2;
          this.dialogVisible = true;
        }else {
           this.$message({
              message: '请先选择一条数据',
              type: 'warn',
          });
        }
      },
      // 删除
      del(){
        if(!this.multipleSelection.length){
          this.$message({
              message: '请先选择一条数据',
              type: 'warn',
          });
        }else {
          this.$confirm('删除后不可恢复，确认删除选中的数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteMeal();
          })
        }
      },
       //删除
       deleteMeal() {
        let arr = [];
        this.multipleSelection.forEach(item => {
          arr.push(item.id)
        });
        const url = this.urlPrev+`api/member/delmember?ids=`+arr;
        axios({ method: 'post', url: url})
            .then(rsp => {
                if (rsp.data.status == 1) {
                   this.getTableData();
                }else if(rsp.data.status == 0){
                    this.$message({
                        message: rsp.data.message,
                        type: 'error',
                    });
                }
            })
            .catch(err => console.log(err));
      },
      // 关闭模态框回调
      cancelModule(val) {
          this.dialogVisible = false;
      },
      // 当前选中餐别
      selectMeal(meal){
        this.currentMeal = meal;
        console.log(meal);
      }
    }
    
}
</script>

<style lang="scss" scoped>
    .memManagement{
        width: 100%;
        height: 100%;
        @include flex();
        flex-direction: column;
        .model{
        width: 100%;
        }
    }
    .searchinput{
        display: flex;
        text-align:justify;
        justify-content:space-between
    }
    .allinput{
        display: flex;
    }
    .input{
        font-size: 16px;
        margin-right: 10px;
    }
    .operBtns{
        border-bottom: 0;
        border-top: 1px solid #cccccc;
    }
    .topsearch{
        margin-bottom: 20px;
    }
    .table{
        width: 100%;
        height: calc(100% - 203px);
    }
</style>